<template>
  <div class="container" style="height: 100%">

    <el-form class="query-form query-form-2" style="display: block">
      <el-button @click="dialogTarget = true">新增</el-button>
    </el-form>

    <div class="div-table" style="padding:0 20px;">
      <el-scrollbar style="height:100%;">
        <el-table ref="table" class="roomTable" :data="tableData" style="width: 100%">
          <el-table-column label="" type="index"></el-table-column>
          <el-table-column label="指标名称" prop="name"></el-table-column>
          <el-table-column label="说明" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-link type="primary" :underline="false" @click="handleModify(row)" style="margin-right: 10px">修改</el-link>
              <el-link type="primary" :underline="false" @click="handleOpenList(row)" style="margin-right: 10px">指标项</el-link>
              <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(row)">
                <el-link slot="reference" type="primary" :underline="false">删除</el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>

    <!-- 指标管理 -->
    <el-dialog class="dialog" :close-on-click-modal="false" :show-close="false" width="500px" title="指标管理" :destroy-on-close="true" :visible.sync="dialogTarget" @close="formTarget={}">
      <el-form v-loading="loading" style="margin-left: 10%;width: 80%;" ref="formTarget" :rules="ruleTarget" :model="formTarget" label-width="80px">
        <el-form-item label="指标名称">
          <el-input v-model="formTarget.name"></el-input>
        </el-form-item>
        <el-form-item label="指标说明">
          <el-input v-model="formTarget.description"></el-input>
        </el-form-item>
        <div>
          <el-button @click="dialogTarget=false">取消</el-button>
          <el-button type="primary" style="margin-left: 40px;" @click="handleSubmit">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 指标项管理 -->
    <el-drawer title="指标项管理" :destroy-on-close="true" size="80%" :visible.sync="dialogTargetItemList">
      <div style="padding: 0 20px">
        <el-button style="margin-bottom: 20px" @click="handleAddItem">新增</el-button>
        <el-table border stripe ref="table" class="roomTable" :data="tableDataList['childIndicatorList']">
          <el-table-column label="" type="index"></el-table-column>
          <el-table-column label="指标名称" prop="name"></el-table-column>
          <el-table-column label="工作目标" prop="jobTarget"></el-table-column>
          <el-table-column label="评分标准" prop="scoreStandard"></el-table-column>
          <el-table-column label="说明" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-link type="primary" :underline="false" @click="handleModifyItem(row)" style="margin-right: 10px">修改</el-link>
              <el-popconfirm title="确定删除吗？" @onConfirm="handleDeleteItem(row)">
                <el-link slot="reference" type="primary" :underline="false">删除</el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

    <!-- 指标项管理 -->
    <el-dialog class="dialog" :close-on-click-modal="false" :show-close="false" width="700px" title="指标项管理" :destroy-on-close="true" :visible.sync="dialogTargetItem" @close="formTargetItem={}">
      <el-form v-loading="loadingItem" style="margin-left: 10%;width: 80%;" ref="formTargetItem" :rules="ruleTargetItem" :model="formTargetItem" label-width="90px">
        <el-form-item label="指标项名称">
          <el-input v-model="formTargetItem.name"></el-input>
        </el-form-item>
        <el-form-item label="工作目标">
          <el-input v-model="formTargetItem.jobTarget"></el-input>
        </el-form-item>
        <el-form-item label="评分标准">
          <el-input v-model="formTargetItem.scoreStandard"></el-input>
        </el-form-item>
        <el-form-item label="指标项说明">
          <el-input type="textarea" v-model="formTargetItem.description"></el-input>
        </el-form-item>
        <div>
          <el-button @click="dialogTargetItem=false">取消</el-button>
          <el-button type="primary" style="margin-left: 40px;" @click="handleSubmitItem">确定</el-button>
        </div>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>

import { listMixin } from '@/mixin'
import { getIndicatorList, addOrUpdateIndicator, deleteIndicator } from '@/api/assessment'

export default {
  name: 'index',
  mixins: [listMixin],
  data() {
    return {
      loading: false,
      loadingItem: false,
      dialogTarget: false,
      dialogTargetItemList: false,
      dialogTargetItem: false,
      tableData: [],
      tableDataList:[],
      formTarget: { name: '', description: '' },
      formTargetItem: { name: '', description: '',jobTarget:'',scoreStandard:'' },
      ruleTarget: { name: [{ required: true, message: '请输入 指标名称' }], description: [{ required: true, message: '请输入 指标说明' }] },
      ruleTargetItem: {
        name: [{ required: true, message: '请输入 指标项名称' }],
        description: [{ required: true, message: '请输入 指标项说明' }],
        jobTarget: [{ required: true, message: '请输入 工作目标' }],
        scoreStandard: [{ required: true, message: '请输入 评分标准' }],
      },
    }
  },
  methods: {
    loadData() {
      return getIndicatorList().then(res => {
        let { data } = res
        this.tableData = data
        if(this.tableDataList){
          this.tableData.map(item=>{
            if(item['indicatorId'] === this.tableDataList['indicatorId']){
              this.tableDataList = JSON.parse(JSON.stringify(item))
            }
          })
        }
      })
    },
    handleModify(target) {
      this.formTarget = JSON.parse(JSON.stringify(target))
      this.dialogTarget = true
    },
    handleDelete(target) {
      if (!target || !target.indicatorId) {return}
      deleteIndicator(target.indicatorId).then(res => {
        if (res.code !== 10000) {return}
        this.$message.success(res.msg)
        this.loadData()
      })
    },
    handleSubmit() {
      this.$refs['formTarget'].validate(valid => {
        if (!valid) {return}
        if (!this.formTarget['parentId']) {this.formTarget['parentId'] = 0}
        this.loading = true
        addOrUpdateIndicator(this.formTarget).then(res => {
          if (res.code !== 10000) {
            this.loading = false
            return
          }
          this.$message.success(res.msg)
          this.loadData()
          this.dialogTarget = false
          this.loading = false
        })
      })
    },


    handleOpenList(target){
      this.tableDataList = target
      this.dialogTargetItemList=true
    },
    handleAddItem() {
      this.dialogTargetItem = true
    },
    handleModifyItem(targetItem){
      this.formTargetItem = JSON.parse(JSON.stringify(targetItem))
      this.dialogTargetItem = true
    },
    handleDeleteItem(targetItem){
      if (!targetItem || !targetItem.indicatorId) {return}
      deleteIndicator(targetItem.indicatorId).then(res => {
        if (res.code !== 10000) {return}
        this.$message.success(res.msg)
        this.loadData()
      })
    },
    handleSubmitItem() {
      this.$refs['formTargetItem'].validate(valid => {
        if (!valid) {return}
        if (!this.formTargetItem['parentId']) {this.formTargetItem['parentId'] = this.tableDataList.indicatorId}
        this.loadingItem = true
        addOrUpdateIndicator(this.formTargetItem).then(res => {
          if (res.code !== 10000) {
            this.loadingItem = false
            return
          }
          this.$message.success(res.msg)
          this.loadData()
          this.dialogTargetItem = false
          this.loadingItem = false
        })
      })
    },

  },
  mounted() {
    this.loadDataProxy()
  }
}
</script>

<style scoped>

</style>
